<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Crash Course(CSS速成班)</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        h1 {
            color: royalblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">
            <h1>Hello world</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio qui magni illo voluptates, cupiditate
                dolore
                atque laboriosam provident sed deleniti. Cupiditate vel veritatis aut debitis in aperiam sit eveniet ea!
                Doloremque, alias pariatur eius rem placeat neque sint, consequuntur delectus veniam at suscipit labore,
                atque eum vel perspiciatis ipsum molestias rerum voluptatum quibusdam. </p>
                <button>This is a button</button>
        </div>
        <div class="box2">
            <h1>Hello world</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio qui magni illo voluptates, cupiditate
                dolore
                atque laboriosam provident sed deleniti. Cupiditate vel veritatis aut debitis in aperiam sit eveniet ea!
                Doloremque, alias pariatur eius rem placeat neque sint, consequuntur delectus veniam at suscipit labore,
                atque eum vel perspiciatis ipsum molestias rerum voluptatum quibusdam. </p>
                <button>This is a button</button>
        </div>
        <div class="list">
            <ul>
                <li><a href="#">List 1</a> </li>
                <li><a href="#">List 2</a> </li>
                <li><a href="123.abc">List 3</a> </li>
                <li><a href="#">List 4</a> </li>
                <li><a href="#">List 5</a> </li>
            </ul>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio qui magni illo voluptates, cupiditate
                dolore
                atque laboriosam provident sed deleniti. Cupiditate vel veritatis aut debitis in aperiam sit eveniet ea!
                Doloremque, alias pariatur eius</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio qui magni illo voluptates, cupiditate
                dolore
                atque laboriosam provident sed deleniti. Cupiditate vel veritatis aut debitis in aperiam sit eveniet ea!
                Doloremque, alias pariatur eius</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio qui magni illo voluptates, cupiditate
                dolore
                atque laboriosam provident sed deleniti. Cupiditate vel veritatis aut debitis in aperiam sit eveniet ea!
                Doloremque, alias pariatur eius</p>
        </div>
        <div class="clearfix"></div>
        <div id="main-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores sint, quaerat at architecto odit inventore? Molestias doloremque dolores suscipit tempore aperiam eligendi sit, placeat fugiat quae mollitia. Beatae, veritatis quam.</p>
        </div>
        <div id="sidebar">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores sint, quaerat at architecto odit inventore? Molestias doloremque dolores suscipit tempore aperiam eligendi sit, placeat fugiat quae mollitia. Beatae, veritatis quam.</p>
        </div>
        <div class="clearfix"></div>
        <ul class="list2">
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <div class="position-box">
            <h1>Heading1</h1>
            <h2>Heading2</h2>            
        </div>
        <button id="fixed">Button</button>
    </div>
    <div style="margin-top: 1000px;"></div>
</body>

</html>